<template>
  <div>
    <div class="all">
      <el-upload
        class="upload-demo"
        action="#"
        multiple
        :limit="1"
        :http-request="uploadSectionFile"
        :file-list="fileList"
        :on-remove="handleRemove"
        :on-change="handleChange"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>

      <img
        style="width: 300px"
        v-if="dialogImageUrl"
        width="100%"
        :src="dialogImageUrl"
        alt=""
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { UploadMultimedia } from '@/service/main/main'

export default defineComponent({
  emits: ['upload'],
  setup(props, { emit }) {
    const newupload = ref()
    const fileList = ref()
    let media_id = ref()
    let dialogImageUrl = ref()
    onMounted(() => {
      return newupload
    })
    const importDataBtnIcon = ref('el-icon-upload2')
    const importDataDisabled = ref(true)
    const headers = {
      'Content-Type': 'multipart/form-data',
    }

    const limitElMessage = () => {
      ElMessage({
        type: 'error',
        message: '单次只能上传一张图片!',
      })
    }

    // 自定义上传
    const uploadSectionFile = async (params: any) => {
      // console.log(params)
      let { file } = params

      const isLt2M = file.size / 1024 / 1024 < 2
      let isType = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|'
      // console.log(isType)
      let TypeBoolean = '|jpg|png|jpeg|bmp|gif|'.indexOf(isType) !== -1

      if (!TypeBoolean) {
        ElMessage({
          type: 'error',
          message: '请上传图片格式',
        })
      }
      if (!isLt2M) {
        ElMessage({
          type: 'error',
          message: '文件大小不能大于2MB!!',
        })
      }
      // return
      if (TypeBoolean && isLt2M) {
        // eslint-disable-next-line no-unreachable
        importDataBtnIcon.value = 'el-icon-loading'
        importDataDisabled.value = false
        // console.log(file)
        let fd = new FormData()
        fd.append('filename', file)
        // 上传图片
        let UploadRes = await UploadMultimedia(fd)
        // console.log(UploadRes)
        media_id.value = UploadRes.media_id
        // console.log(media_id.value)
        emit('upload', media_id)
      }
    }
    function handleRemove(file: any, fileList: any) {
      console.log('删除')
      dialogImageUrl.value = ''
      media_id.value = ''
      emit('upload', { media_id, dialogImageUrl })
    }
    function handleChange(file: any, fileList: any) {
      console.log(file, fileList)
      imagePrevieview(file)
    }
    const imagePrevieview = (file: any) => {
      const reader = new FileReader()
      reader.readAsDataURL(file.raw)
      reader.onload = (event) => {
        dialogImageUrl.value = event.target?.result
        // console.log(dialogImageUrl.value)
      }
    }

    return {
      headers,
      newupload,
      importDataBtnIcon,
      importDataDisabled,
      media_id,
      fileList,
      dialogImageUrl,
      limitElMessage,
      uploadSectionFile,
      handleRemove,
      handleChange,
    }
  },
})
</script>

<style scoped></style>
